<!--报考岗位||是否服从调配-->
<template>
  <div class="container">
    <van-form @submit="onSubmit">
      <!--      报考岗位-->
      <van-cell required title="报考岗位"/>
      <van-field
        is-link
        readonly
        clickable
        name="exam_job"
        :value="value1"
        placeholder="点击选择报考岗位"
        @click="showPicker1 = true"
        :rules="[{ required: true, message: '请选择报考岗位' }]"
      />
      <van-popup v-model="showPicker1" position="bottom" :style="{ height: '40%' }" round>
        <van-picker
          show-toolbar
          :columns="columns1"
          @confirm="onConfirm1"
          @cancel="showPicker1 = false"
        />
      </van-popup>
      <!--      是否服从调配-->
      <van-cell required title="是否服从调配"/>
      <van-field name="assign_able">
        <template #input>
          <van-radio-group v-model="radio" direction="horizontal">
            <van-radio name="1">是</van-radio>
            <van-radio name="2">否</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" :disabled="btn_disable">
          下一步
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: 'BmInformation',
  data () {
    return {
      radio: '',
      showPicker1: false,
      columns1: [],
      value1: '',
      exam_job: '',
      assign_able: '',
      btn_disable: false
    }
  },
  methods: {
    onSubmit (e) {
      this.$store.dispatch({
        type: 'addBmInformation',
        exam_job: e.exam_job,
        assign_able: e.assign_able
      })
      this.$emit('part3', false)
      this.btn_disable = true
    },
    // 报考岗位对应函数
    onConfirm1 (value) {
      this.value1 = value
      this.showPicker1 = false
    }
  },
  mounted () {
    const that = this
    this.$ajax.get('/api/v1/options').then(function (res) {
      const data = res.data.data
      const job = data.exam_job
      for (const i in job) {
        that.columns1.push(job[i])
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  /*background-color: beige;*/

  ::v-deep .van-radio__icon--checked .van-icon {
    background-color: #a52a2a;
    border-color: hsla(0, 0%, 100%, .9);
  }
}
</style>
